<!--
 * @Author: yansheng 610363806@qq.com
 * @Date: 2024-07-26 21:07:35
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-08-02 17:41:32
 * @FilePath: \cell-admin\src\pages\user\list\rebateList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      title="查看返佣"
      placement="right"
      :closable="true"
      :maskClosable="false"
      :keyboard="false"
      @close="visible = false"
      width="800"
      v-model:open="visible"
    >
      <a-tabs
        v-model:activeKey="activeKey"
        type="card"
        @change="callback"
      >
        <a-tab-pane
          key="1"
          tab="未结清"
        ></a-tab-pane>
        <a-tab-pane
          key="2"
          tab="已结清"
        ></a-tab-pane>
      </a-tabs>
      <template v-if="activeKey == 1">
        <template v-if="count_money">总计: {{ count_money.count_money }}</template>
        <a-button
          class="mr10"
          style="margin-left: 30px"
          type="primary"
          @click="reLoad()"
          v-if="pagination.total > 0"
        >
          一键结算
        </a-button>
      </template>
      <a-table
        :row-key="(record) => record.uid"
        :loading="loading"
        :columns="columns"
        :dataSource="tableData"
        @change="handleTableChange"
        :pagination="
          isObject(pagination)
            ? {
                showQuickJumper: true,
                total: pagination.total,
                current: pagination.current,
                pageSize: pagination.pageSize,
                showTotal: (total) => `共计 ${pagination.total} 条`
              }
            : false
        "
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'User'">
            <div
              class="user-info"
              v-if="record.User && record.User.avatar"
            >
              <img
                class="user-info-avatar"
                style=""
                :src="record.User.avatar"
                alt=""
              />
              <div class="user-name">
                <div class="name">{{ record.User.user_name }}</div>
                <div class="phone">{{ record.User.phone }}</div>
              </div>
            </div>
          </template>
          <template v-if="column.dataIndex === 'created_at'">
            <template v-if="activeKey == 2">
              {{ record.deleted_at }}
            </template>
          </template>

          <template v-if="column.dataIndex === 'deleted_at'">
            <a-tag
              color="cyan"
              v-if="record.deleted_at"
            >
              已结清
            </a-tag>
            <a-tag
              color="blue"
              v-else
            >
              未结清
            </a-tag>
          </template>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<script setup>
  import { rebateList, rebateSettle } from '@/api/index.js'
  import { message } from 'ant-design-vue'
  import { isObject } from 'lodash-es'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'
  const showAddDialog = ref(false)
  const visible = ref(false)
  const loading = ref(false)
  const columns = [
    {
      title: 'ID',
      dataIndex: 'uid'
    },
    {
      title: '用户信息',
      dataIndex: 'User'
    },

    {
      title: '返现',
      dataIndex: 'rebate_money'
    },

    {
      title: '明细',
      dataIndex: 'remark'
    },

    {
      title: '状态',
      dataIndex: 'deleted_at'
    },
    {
      title: '创建时间',
      dataIndex: 'created_at'
    },

    {
      title: '操作',
      dataIndex: 'action',
      key: 'action'
    }
  ]
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const activeKey = ref('1')
  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getList()
  }
  const uid = ref('')
  const reLoad = () => {
    rebateSettle({ uid: uid.value, count_money: count_money.value.count_money })
      .then((res) => {
        if (res.errorCode) {
          message.error(res.msg || '操作失败')
          return
        }
        message.success('操作成功！')
        getList()
      })
      .catch((err) => {
        message.error(err.msg)
      })
  }
  const callback = () => {
    pagination.current = 1

    getList()
  }

  const count_money = ref(null)
  const tableData = ref([])
  const getList = () => {
    loading.value = true
    rebateList({
      uid: uid.value,
      page: pagination.current,
      settle: activeKey.value != 1,
      pageSize: pagination.pageSize
    })
      .then((res) => {
        if (res.errorCode) {
          message.error(res.msg || '操作失败')
          return
        }
        count_money.value = res.count_money
        tableData.value = res.data
        pagination.total = res.total
      })
      .finally(() => {
        loading.value = false
      })
  }

  const init = (row) => {
    uid.value = row.uid

    getList()
    visible.value = true
  }

  defineExpose({
    init
  })
</script>
<style scoped lang="less">
  .user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    .user-info-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
